<template>
	<view class="">
		<Tabs :tabs="tabs" :current="current" selectedColor="#039708" :bold="true" @change="change" ></Tabs>
		<!-- 这是一条华丽的分割线 -->
		<view class="list-con">
			<view class="list-con-left">
				<view class="list-left-item" :class="{'item_active':add_class==i}" v-for="(v,i) in secondlist" :key="i"
					@click="secondRecord(v,i)">
					{{v.name}}
				</view>
			</view>
			<scroll-view class="list-con-right" v-if="shoplist.length!=0" :style='{height:height+"rpx"}'
				:scroll-y="true" @scrolltolower="scrolltolower">
				<List mode="listthree" v-for="(item,index) in shoplist" leftColor="#B31616" :leftfontSize="36" :index="index" :Data="item"  @click.native="goDetalis(item)"></List>
			</scroll-view>
			<view class="empty" :style='{height:height+"rpx"}' v-else>
				<Empty mode="list" ></Empty>
			</view>
		</view>
	</view>
</template>

<script>
	import Tabs from "../../components/bw-Tabs/bw-Tabs.vue";
	import List from "../../components/bw-lists/bw-lists.vue";
	import Empty from "../../components/bw-Empty/bw-Empty"
	import {goodsCategory,goodsForCategory} from "../../api/shop.js";
	export default{
		components:{
			Tabs,
			List,
			Empty
		},
		data(){
			return {
				current:0,
				tabs:[],
				height:0,
				secondlist:[],
				add_class:0,
				shoplist:[],
				pagelist:{},
			}
		},
		async onLoad() {
			this.getHight()
			console.log(this.shoplist)
			//获取一级分类
			await goodsCategory({
				
			}).then(res=>{
				this.tabs= res.data.data
				 // res.data.data.forEach(item=>{
					//  this.tabs.push(item.name)
				 // })
			})
			//获取二级分类
			goodsCategory({
				pid:this.tabs[0].id
			}).then(res=>{
				this.secondlist= res.data.data
				 goodsForCategory({
				 	identify:this.secondlist[0].identify
				 }).then(res=>{
				 	res.data.data.forEach(item=>{
				 		item['checked']=false
				 	})
				 	this.shoplist=res.data.data
				 })
			})
			
		},
		methods:{
			//获取屏幕高度
			getHight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.height = res.screenHeight*2-176
					}
				})
			},
			goDetalis(item){
				uni.navigateTo({
					url:"/pages/shop/shopDetails?id="+item.id
				})
			},
			secondRecord(item, i) {
				this.add_class = i
				console.log(this.add_class)
				goodsForCategory({
					identify:this.secondlist[this.add_class].identify
				}).then(res=>{
					this.shoplist=res.data.data
				})
			},
			async change(e){
				this.current=e.index;
				this.add_class=0
				await goodsCategory({
					pid:this.tabs[this.current].id
				}).then(res=>{
					this.secondlist= res.data.data
					 // res.data.data.forEach(item=>{
						//  this.tabs.push(item.name)
					 // })
				})
				goodsForCategory({
					identify:this.secondlist[0].identify
				}).then(res=>{
					this.shoplist=res.data.data
				})
			},
			scrolltolower() {
				//监听滚动条
				if (this.pagelist.current_page + 1 <= this.pagelist.last_page) {
					this.switchPage(true)
				} else {
					uni.showToast({
						title: "没有更多数据啦",
						icon: "none"
					})
				}
			},
			async switchPage(id) {
				await goodsForCategory({
					identify: this.tabs[this.current].identify,
					page: this.pagelist.current_page + 1
				}).then(res => {
					res.data.shoplist.forEach(item => {
						this.shoplist.push(item)
					})
					//整个数据
					this.pagelist = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
		
	.list-con {
		width: 100%;
		height: 100%;
		.list-con-left {
			width: 20%;
			height: 1070rpx;
			float: left;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			.list-left-item {
				width: 98%;
				padding: 20rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
	
				text-align: center;
			}
	
			.item_active {
				color: #039708;
				font-weight: bolder;
			}
		}
		/deep/ .uni-scroll-view-content{
			width: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding:0rpx 20rpx 0 20rpx ;
			margin-top: 40rpx;
		}
		.list-con-right {
			width: 80%;
			float: left;
		}
	}
</style>
